<?php
require_once('common/header.php');
?>
<style>
    .page-title-bar { padding: 1rem; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; background-color: #fff;}
    .page-title-bar .back-btn { font-size: 1.5rem; color: #333; text-decoration: none; margin-right: 1rem;}
    .page-title-bar h4 { margin: 0; font-weight: 600; }
    .account-card .card-title { font-size: 1.1rem; }
    .account-card .info-line { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
    .account-card .info-line .label { color: #6c757d; }
    .account-card .info-line .value { font-weight: 500; }
    .account-card .text-muted { font-size: 0.9rem; }
</style>

<div id="account-app" v-cloak>
    <div class="page-title-bar">
        <a href="profile.php" class="back-btn"><i class="bi bi-arrow-left"></i></a>
        <h4>提现账户</h4>
    </div>

    <div class="main-content">
        <div v-if="isLoading" class="text-center p-5"><div class="spinner-border"></div></div>
        <div v-else>
            <div id="alert-container-main"></div>
            <!-- 支付宝卡片 -->
            <div class="card account-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="card-title mb-0"><i class="bi bi-alipay text-primary me-2"></i>支付宝账户</h5>
                        <button class="btn btn-outline-primary btn-sm" @click="openModal('alipay')">
                            {{ account.alipay_name ? '修改' : '绑定' }}
                        </button>
                    </div>
                    <div v-if="account.alipay_name">
                        <div class="info-line"><span class="label">姓名</span><span class="value">{{ account.alipay_name }}</span></div>
                        <div class="info-line"><span class="label">账号</span><span class="value">{{ account.alipay_acc }}</span></div>
                    </div>
                    <p v-else class="text-muted">您尚未绑定支付宝账户。</p>
                </div>
            </div>

            <!-- 银行卡卡片 -->
            <div class="card account-card mt-3">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="card-title mb-0"><i class="bi bi-bank me-2"></i>银行卡账户</h5>
                        <button class="btn btn-outline-primary btn-sm" @click="openModal('bank')">
                             {{ account.bank_card && account.bank_card.number ? '修改' : '绑定' }}
                        </button>
                    </div>
                     <div v-if="account.bank_card && account.bank_card.number">
                        <div class="info-line"><span class="label">姓名</span><span class="value">{{ account.bank_card.name }}</span></div>
                        <div class="info-line"><span class="label">卡号</span><span class="value">{{ account.bank_card.number }}</span></div>
                        <div class="info-line"><span class="label">开户行</span><span class="value">{{ account.bank_card.bank_name }}</span></div>
                        <div class="info-line"><span class="label">支行</span><span class="value">{{ account.bank_card.branch }}</span></div>
                    </div>
                    <p v-else class="text-muted">您尚未绑定银行卡账户。</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 统一的编辑模态框 -->
    <div class="modal fade" id="editAccountModal" tabindex="-1">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">{{ modal.title }}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <form id="account-form" @submit.prevent="saveAccount">
                <!-- 支付宝表单 -->
                <div v-if="modal.type === 'alipay'">
                    <div class="mb-3"><label class="form-label">姓名</label><input type="text" class="form-control" v-model="form.alipay_name" required></div>
                    <div class="mb-3"><label class="form-label">支付宝账号</label><input type="text" class="form-control" v-model="form.alipay_acc" required></div>
                </div>
                <!-- 银行卡表单 -->
                <div v-if="modal.type === 'bank'">
                     <div class="mb-3"><label class="form-label">持卡人姓名</label><input type="text" class="form-control" v-model="form.bank_name" required></div>
                     <div class="mb-3"><label class="form-label">银行卡号</label><input type="text" class="form-control" v-model="form.bank_acc" required></div>
                     <div class="mb-3"><label class="form-label">开户银行</label><select class="form-select" v-model="form.proxy_bank_name" required><option disabled value="">请选择</option><option>中国银行</option><option>工商银行</option><option>招商银行</option><option>邮政银行</option><option>交通银行</option><option>建设银行</option><option>农商银行</option></select></div>
                     <div class="mb-3"><label class="form-label">开户支行</label><input type="text" class="form-control" v-model="form.proxy_bank_zh" required></div>
                </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" @click="saveAccount" :disabled="isSubmitting">{{ isSubmitting ? '保存中...' : '保存' }}</button>
          </div>
        </div>
      </div>
    </div>
</div>
<?php require_once('common/footer.php'); ?>